<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>挡板弹球</title>
		<style type="text/css">
			/* 所有元素内外边距设置为0 */
			*{margin: 0;padding: 0;}
			html,body{height: 100%;}
			body{
				background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14051276889%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650011274&t=a102ae57e82d69758fab8c8b8ec5ae71");
				background-size: 100% 100%;
			}
			.box{
				width: 60px;
				height: 60px;
				/* background-color: pink; */
				/* 相对于浏览器进行定位 */
				position: fixed;
				/* 距离浏览器左边的位置 */
				left: 0px;
				/* 距离浏览器上边的位置 */
				top: 0px;
				background-image: url(123.png);
				background-size: 100% 100%;
			}
			.baffle{
				width: 300px;
				height: 40px;
				/* background-color: #000000; */
				position: fixed;
				left: 0px;
				top: 800px;
				background-image: url(321.png);
				background-size: 100% 100%;
			}
			.score{
				width: 200px;
				height: 100px;
				/* 文本居中 */
				text-align: center;
				/* 行高 */
				line-height: 100px;
				position: fixed;
				top: 20px;
				right: 30px;
				/* 字体大小 */
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 球 -->
		<div class="box" id="boxId"></div>
		<!-- 挡板 -->
		<div class="baffle" id="baffleId"></div>
		<!-- 得分 -->
		<div class="score" id="scoreId">0分</div>
		
		<script type="text/javascript">
			//分
			var score = 0;
			//计分板
			var scoreId = document.getElementById("scoreId");
			//通过document对象 DOM 通过id寻找到标签
			var baffleId = document.getElementById("baffleId");
			function moveBaffle(e){
				//鼠标距离浏览器左边的距离
				var mouseX = e.pageX;
				//鼠标距离浏览器顶部的距离
				var mouseY = e.pageY;
				//板子对象
				baffleId.style.left = mouseX - 150 + "px";
			}
			//监听鼠标移动
			document.onmousemove = moveBaffle;
		
		
			//----------------球移动开始------------------------
			//一个 = 叫赋值（右给左） 两个 == 叫判断
			//浏览器的宽
			var windowX = window.innerWidth;
			//浏览器的高
			var windowY = window.innerHeight;
			//球
			var boxId = document.getElementById("boxId");//通过id寻找标签
			var left = 0;//创建一个变量名字叫left
			var isLeft = true;//正在往左跑 boolean类型 只有 true（是）和 false （否）两种状态
			var myTop = 0;
			var isTop = true;
			function move(){//moveLeft函数 函数的代码必须通过事件驱动
				if(isLeft == true){//判断是否正在往左跑
					left++;//自身加1
				}else{
					left--;//自身减1
				}
				if(isTop == true){//上下的
					myTop++;//自身加1
				}else{
					myTop--;//自身减1
				}
				
				//在赋值之前要进行判断
				if(left+60 == windowX){
					isLeft = false;
				}
				if(left == 0){
					isLeft = true;
				}
				
				if(myTop+60 == windowY){
					//isTop = false;
					alert("Game Over");
				}
				
				if(myTop == 0){
					isTop = true;
				}
				
				boxId.style.left = left+"px";//修改标签样式
				boxId.style.top = myTop+"px";
				//--------------碰板子逻辑开始-----------------
				//获取板子的left
				//Number.parseInt() 字符串转数字  去掉单位
				var baffleLeft = Number.parseInt(baffleId.style.left);
				if(myTop+60 == 800){//板子和球同高
					if(left>baffleLeft-19){//球在板子的右侧
						if(left+60<baffleLeft+300+19){//判断球在板子的左侧
							isTop = false;
							//接住就加分
							score++;
							//把分写进计分板
							scoreId.innerText = score + "分";
							//站长素材
							if(score >= 2){
								//播放超神音效
								var audio = new Audio("chaosheng.wav");
								audio.play();
							}
						}
					}
				}
				//--------------碰板子逻辑结束-----------------
			}
			//0.001秒执行一次
			setInterval("move()",1);
			//----------------球移动结束------------------------
		</script>
	</body>
</html>
